<template>
  <!-- 书籍输入查询组件 -->
  <div class="searchBooks">
    <div class="container-fluid">
      <div class="row d-flex flex-column">
        <div class="col-12 col-md-3">
          <!-- 搜索框 -->
          <form class="form-inline my-2 my-lg-0 searchInptu formsItem border-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search Books" @focus="flagTarget" @input="getSearch($event)">
            <!-- <button class="btn btn-outline-success my-2 my-sm-0">搜索</button> -->
          </form>
        </div>
        <!-- 搜索结果展示区块 -->
        <div class="col-12 col-md-5 col-lg-3 bg-white searchContent">
          <div class="row no-gutters border-bottom" v-for="(v, k) in this.$store.state.getSearchBooks">
            <div class="col-xl-3  col-2 py-2 d-flex justify-content-center align-items-center">
              <router-link to='/bookDetails'>
                <img :src="v.images" class="img-fluid bookBoxs shadow-sm" alt=""  @click="getInto(v.id)">
              </router-link>
            </div>
            <div class="col-xl-9 col-10">
              <div class="card-body">
                <h5 class="card-title" @click="getInto(v.id)"><router-link to='/bookDetails'>{{v.name}}</router-link></h5>
                <p class="card-text"><small class="text-muted">{{v.author}}</small></p>
              </div>
            </div>

          </div>
          <div class="theEnd mt-1" v-if="this.$store.state.getSearchBooks">
            <h3>- END -</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SearchBooks',
    data () {
      return {

      }
    },
    methods: {
      flagTarget() {
        if (!(window.screen.width >= 576)) {
          // 在移动端的搜索框会跳转到新的页面进行搜
          window.location.hash = '/mobileSearch';
        }
      },
      getSearch(event) {
        let val = event.path[0].value;
        if (val.length != 0) {
          // 输入值非空提交搜索
          this.$store.dispatch('asynSearchBooks', val);
        } else {
          // 否则清空输入框
          this.$store.commit('clearSearchBooks');
        }
      },
      getInto(index) {
        if (window.location.hash = '/bookDetails') {
          window.location.reload();
        }
        localStorage.setItem('booksId', index);
      }
    }
  }

</script>

<style scoped>
  .searchInptu{
    position: relative;
  }
  .searchContent {
    max-height: 450px;
    overflow: auto;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 99;
  }
  .bookBoxs {
    width: 100%;
  }
  .formsItem {
    margin-left: -20px;
  }
  .theEnd {
    height:60px;
    margin:0 auto;
    text-align:center;
    color:rgb(180,180,180);
  }
  @media (max-width: 575px) {
    .searchContent {
      border-top: 1px solid #ddd;
      max-height: 90vh;
    }
  }

  @media (min-width: 576px) and (max-width: 767px) {
    .searchContent {
      border-top: 1px solid #ddd;
      max-height: 90vh;
    }
  }

  @media (min-width: 768px) and (max-width: 991px) {

  }

  @media (min-width: 992px) and (max-width: 1199px) {

  }

  @media (min-width: 1200px) {
    
  }
</style>